@charset 'utf-8';

html,
body {
    height: 100%;
    font-size: 62.5%;
}

#inp {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
    height: 8rem;
    min-height: 8rem;
    max-height: 8rem;
    flex: 1;
    background-color: #54FF9F;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    .searchBox {
        width: 50rem;
        height: 4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        border-radius: 1.4rem;
        background-color: #fff;
        @media screen and(max-width: 900px) {
            & {
                width: 40rem;
            }
        }
        @media screen and(max-width: 620px) {
            & {
                width: 32rem;
            }
        }
        @media screen and(max-width: 420px) {
            & {
                width: 28rem;
            }
        }
        input {
            border: 0;
            outline: 0;
        }
        .scanIn {
            flex: 5;
            height: 100%;
            float: right;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 1.6rem;
            background-color: #fff;
        }

        .search {
            flex: 1;
            height: 100%;
            margin: auto;
            display: block;
            font-size: 1.6rem;
            background-color: #fff;
            border-left: 1px solid #C1FFC1;
            cursor: pointer;
        }
    }
}

.content {
    width: 100%;
    min-height: 40rem;
    margin: 0 auto;
    background: radial-gradient(#C1FFC1, #fff);
    flex: 5;
    overflow-x:hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    p {
        margin-bottom: 0;
        font-size: 1.4rem;
        line-height: 1.4rem;
    }
    .resultTip {
        width: 80%;
        height: 2rem;
        display: block;
        margin: 1rem auto 0 auto;
        line-height: 1.6rem;
        font-size: 1.6rem;
        i {
            font-size: inherit;
        }
    }
    .defaultTip {
        font-size: 1.6rem;
        line-height: 1.6rem;
        height: 1.6rem;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -.8rem;
    }
    .resultList {
        width: 80%;
        display: flex;
        flex-direction: column;
        margin: .5rem auto;
        padding: 0;
        flex: 1;
        .resultItem {
            width: 100%;
            min-height: 10%;
            padding: .25rem 0;
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-self: center;
            justify-content: space-between;
            font-size: 1.2rem;
            .resultImg {
                width: 3rem;
                height: 3rem;
                display: block;
                margin:0 .5rem;
                float: left;
                border-radius: 50%;
                background-repeat: no-repeat;
                background-size: 3rem;
            }
            .playDef{
                background-image: url(../static/images/playDef.png);
            }
            .playing{
                background-image: url(../static/images/playing.png);
            }
            .songName {

                flex: 5;
                height: inherit;
                padding-left: .5rem;
                font-size: 1.6rem;
                line-height: 3rem;
                span {
                    max-height: 1.6rem;
                    line-height: 1.6rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    cursor: pointer;
                    display: inline-block;
                    &:hover{
                        color: #1874CD;
                    }
                    
                }
            }
            .singerName {
                color: #696969;
                flex: 3;
            }
            .beforePage {
                display: block;
                width: 8rem;
                text-align: right;
                line-height: 3rem;
                cursor: pointer;
            }
            .nextPage {
                @extend .beforePage;
                text-align: left;
            }
            &:nth-child(2n) {
                background-color: rgba(255, 255, 255, 0.2);
            }
            &:nth-child(2n+1) {
                background-color: rgba(193, 255, 193, 0.2);
            }
        }
    }
}

footer {
    flex: 1;
    min-height: 4rem;
    height: 4rem;
    background-color: #54FF9F;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: static;
    bottom: 0;
    #audio {
        display: none;
    }
    .controlBtns {
        min-width: 30rem;
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        @media screen and (max-width: 900px) {
            flex:2;
            min-width:20rem;
        }
        @media screen and (max-width: 620px) {
            flex:1;
            width:20rem;
        }
        .poster {
            flex: 1;
            max-width: 4rem;
            height: 4rem;
            display: block;
            background-color: #fff;
            margin-left: 5rem;
            cursor: pointer;
            @media screen and (max-width: 900px) {
                margin-left: 1rem;
                margin-right: 1rem;
            }
            @media screen and (max-width: 620px) {
                margin-left:1rem;
            }
        }
        div {
            flex: 1;
            width: 2rem;
            height: 2rem;
            background-size: 2rem;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
        .befSong {
            background-image: url(../static/images/sys.png);
        }
        .playSong {
            background-image: url(../static/images/start.png);
        }
        .nextSong {
            background-image: url(../static/images/xys.png);
        }
        .pauseSong {
            background-image: url(../static/images/zt.png);
        }
        .loopOne {
            background-image: url(../static/images/dqxh.png);
        }
        .loopList {
            background-image: url(../static/images/sxbf.png);
        }
    }
    .lyric {
        flex: 2;
        height: 4rem;
        overflow: hidden;
        text-align: center;
        padding: 0 1rem;
        font-size: 1.6rem;
        line-height: 4rem;
        letter-spacing: .2rem;
        color: #fff;
        font-weight: bolder;
        @media screen and (max-width: 900px) {
            flex: 3;
        }
        @media screen and (max-width: 620px) {
            display: none;
        }
    }
}